<template>
    <div class="container benefit">
        <div class="tabCommonTitle">
            <span>成果经济效益</span>
        </div>
        <div class="benefitContent">
            <div class="formInfo">
                <div class="formItem">
                    <div class="label">
                        <span>*</span>
                        <b>项目投资额（万元）：</b>
                    </div>
                    <div class="inputCont">
                        <a-form-model-item ref="totalProject">
                            <a-input placeholder="请填写项目投资额（万元）" v-model="form.totalProject" type="number" @blur="() => {$refs.totalProject.onFieldBlur();}"/>
                        </a-form-model-item>
                    </div>
                </div>
                <div class="formItem">
                    <div class="label">
                        <span>*</span>
                        <b>回收期（年）：</b>
                    </div>
                    <div class="inputCont">
                        <a-form-model-item ref="payBack">
                            <a-input placeholder="请填写回收期（年）" v-model="form.payBack" type="number" @blur="() => {$refs.payBack.onFieldBlur();}"/>
                        </a-form-model-item>
                    </div>
                </div>
            </div>
            <a-table bordered :columns="columns" :data-source="jjxylist" :pagination="false">
                <div slot="customTitle" class="customTitle">
                    操作
                    <a-button type="primary" size="small" @click="add_jjxy" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">新增</a-button>
                </div>
                <span v-if="is_modify=='Y'?true:false" slot="action" slot-scope="text, record">
                    <a>
                        <img style="width:18px;height:18px;margin-right:11px;" @click="edit_jjxy(record)" src="@/assets/img/bianji.png" alt="">
                        <img style="width:18px;height:18px;margin-left:11px;" @click="del_jjxy(record.id)" src="@/assets/img/shanchu1.png" alt="">
                    </a>
                </span>
            </a-table>
            <div class="formInfo" style="border-top: 0;">
                <div class="formItem" style="height: 80px; line-height: 80px; border: 0 !important;">
                    <div class="label" style="width: 360px;">
                        <span>*</span>
                        <b>经济效益的有关说明及各栏目的计算依据（限制400字）</b>
                    </div>
                    <div class="inputCont">
                        <a-form-model-item ref="explain">
                            <a-textarea style="height: 80px !important; min-height: 80px !important; max-height: 80px !important;" placeholder="请填写经济效益的有关说明及各栏目的计算依据" :maxLength="400" v-model="form.explain" @blur="() => {$refs.explain.onFieldBlur();}"/>
                        </a-form-model-item>
                    </div>
                </div>
            </div>
            <!-- 实施应用单位经济效益 -->
            <div class="formInfo">
                <div class="formTitle" style="width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;">
                  <div class="title" style="color: #3288EE; font-size: 14px;"><span style="color:red">*</span>实施应用证明</div>
                    <div class="btnCont">
                        <a-button class="templateDownload" style="margin-right:20px;" @click="downloadSsyymb">模板下载</a-button>
                        <a-button class="shangchuan pointer" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true" @click="upload_ssyy(1)">添加</a-button>
                    </div>
                </div>
            </div>
            <a-table bordered :columns="columns1" :data-source="ssyylist" :pagination="false">
                <template slot="action" slot-scope="text, record">
                    <a>
                        <img style="width:18px;height:18px;margin-right:22px;" @click="preview_ssyy(record.filePath)" src="@/assets/img/yulan.png" alt="">
                        <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-right:11px;"  @click="upload_ssyy(2, record.id)" src="@/assets/img/bianji.png" alt="">
                        <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="del_ssyy(record.id)" src="@/assets/img/shanchu1.png" alt="">
                    </a>
                </template>
            </a-table>
        </div>
        <a-button class="save_btn pointer" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="onSubmit" :disabled="is_modify=='Y'?false:true">保存</a-button>
        <!-- 其他材料信息 -->
        <a-modal
            v-drag-modal
			title="其他材料信息"
            class="enclosure_modal"
			:visible="visible"
            :width="500"
            :maskClosable="false"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <a-button key="submit" type="primary" @click="handleSubmit" :disabled="is_modify=='Y'?false:true">保存</a-button>
            </template>
			<a-form-model ref="ruleForm_add" :model="form_add" :rules="rules_add" >
				<a-form-model-item ref="add_xse" prop="add_xse" label="新增销售额" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_xse" placeholder="新增销售额" type="number" @blur="() => {$refs.add_xse.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_lr" prop="add_lr" label="新增利润" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_lr" placeholder="新增利润" type="number" @blur="() => {$refs.add_lr.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_ss" prop="add_ss" label="新增税收" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_ss" placeholder="新增税收" type="number" @blur="() => {$refs.add_ss.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_nf" prop="add_nf" label="年份" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-date-picker
                        :open='yearShowOne'
                        @openChange="openChangeOne"
                        @panelChange="panelChangeOne"
                        @change="onchangetime"
                        mode="year"
                        format="YYYY"
                        bordered
                        type="date"
                        v-model="form_add.add_nf"
                        suffix-icon=" "
                        placeholder="年份"
                    />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf" />
        <ProofOfImplementation :showFlag="applicationProofVisible" :type="addType" :edit_id="edit_id" @callback="handleProof" />
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import {
    cjxsb_add,
    cxjsb_queryById_jjxy,
    cxjsb_list_jjxy,
    cxjsb_add_jjxy,
    cxjsb_del_jjxy,
    cxjsb_ssyyList,
    cxjsb_downloadSsyymb,
    cxjsb_ssyyDelete
} from '@/api/shenbao';
import testPdf from '@/views/declarationSystem/declare/testPdf';
import ProofOfImplementation from './benefit/proofOfImplementation'
import moment from 'moment';
export default {
    name: 'Benefit',
    props: ['is_modify'],
    components: {
        testPdf,
        ProofOfImplementation
    },
    data() {
        return {
            columns: [
                {
                    title: '年份',
                    dataIndex: 'jjxyzbNfCopy',
                    key: 'jjxyzbNfCopy',
                    width: 100
                },
                {
                    title: '新增销售额（万元）',
                    dataIndex: 'jjxyzbXzxse',
                    key: 'jjxyzbXzxse',
                    width: 260
                },
                {
                    title: '新增利润（万元）',
                    dataIndex: 'jjxyzbXzlr',
                    key: 'jjxyzbXzlr',
                },
                {
                    title: '新增税收（万元）',
                    dataIndex: 'jjxyzbXzss',
                    key: 'jjxyzbXzss',
                },
                {
                    key: 'action',
                    slots: { title: 'customTitle' },
                    scopedSlots: { customRender: 'action' },
                },
            ],
            columns1: [
                {
                    title: '序号',
                    customRender: (text, record, index) => index + 1
                },
                {
                    title: '实施应用单位名称',
                    dataIndex: 'ssyyDwmc',
                    key: 'ssyyDwmc'
                },
                {
                    title: '起始时间',
                    dataIndex: 'ssyyQssj',
                    key: 'ssyyQssj'
                },
                {
                    title: '经济效益',
                    dataIndex: 'ssyyJjxy',
                    key: 'ssyyJjxy',
                    customRender: (text) => {
                        return text + '万元'
                    }
                },
                {
                    title: '上传状态',
                    dataIndex: 'filePath',
                    key: 'filePath',
                    customRender: (text) => {
                        return text ? '成功' : '--'
                    }
                },
                {
                    title: '操作',
                    scopedSlots: { customRender: 'action' },
                }
            ],
            ssyylist: [],
            form_add: {},
            yearShowOne: false,
            applicationProofVisible: false,
            cxj_cxj_id: '',
            xmobj: {},
            form: {
                // 项目投资额
                totalProject: '',
                // 回收期
                payBack: '',
                explain:''
            },
            rules: {
                totalProject: [{ required: true, message: '请填写项目投资额', trigger: 'blur' }],
                payBack: [{ required: true, message: '请填写回收期', trigger: 'blur' }],
                explain: [{ required: true, message: '经济效益的有关说明及各栏目的计算依据', trigger: 'blur' }],
            },
            visible: false,
            rules_add: {
                add_xse: [{ required: true, message: '请填写销售额', trigger: 'blur' }],
                add_lr: [{ required: true, message: '请填写利润', trigger: 'blur' }],
                add_ss: [{ required: true, message: '请填写税收', trigger: 'blur' }],
                add_nf: [{required: true, message: '请选择时间',trigger: 'change'}],
            },
            jjxylist: [],
            edit_id: '',
            showpdf: false,
            filePath: '',
            addType: 1
        }
    },
    mounted() {
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.init();
    },
    methods: {
        moment,
        ...mapActions('fillingSteps', ['getStatus']),
        handleProof() {
            this.get_cxjsb_ssyyList()
        },
        downloadSsyymb() {
            let that = this;
            cxjsb_downloadSsyymb({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                const data = res.data;
                const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url;
                link.setAttribute('download', '实施应用证明.doc')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            })
        },
        upload_ssyy(addType, id) {
            this.addType = addType
            if (addType == 2) {
                this.edit_id = id
            }
            this.applicationProofVisible = !this.applicationProofVisible;
        },
        init() {
            this.get_cxjsb_queryById_jjxy();
            this.get_cxjsb_list_jjxy();
            this.get_cxjsb_ssyyList();
        },
        // 【预览】实施应用单位经济效益
        preview_ssyy(filePath) {
            this.showpdf = !this.showpdf;
            this.filePath = filePath;
        },
        // 【删除】实施应用单位经济效益
        del_ssyy(id) {
            let that = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsb_ssyyDelete({
                        cxj_cxj_id: that.cxj_cxj_id,
                        id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            that.$message.success('删除成功');
                            that.get_cxjsb_ssyyList();
                        } else {
                            that.$message.error(data.message);
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    that.destroyAll();
                },
            });
        },
        get_cxjsb_ssyyList() {
            let that = this;
            cxjsb_ssyyList({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                if (res.data.code === 200) {
                    that.ssyylist = res.data.result;
                }
            })
        },
        openChangeOne(status){
            //status是打开或关闭的状态
            if(status){
                this.yearShowOne =  true
            }
        },
        // 得到年份选择器的值
        panelChangeOne(value){
            console.log('panelChangeOne-value===', moment(value).format('YYYY'))
            this.form_add.add_nf = moment(value).format('YYYY')
            this.yearShowOne = false
        },
        onchangetime(date, dateString) {
            console.log('onchangetime===', date, dateString)
        },
        add_jjxy() {
            this.visible = true;
            this.edit_id = '';
        },
        edit_jjxy(item) {
            this.visible = true;
            let data = JSON.parse(JSON.stringify(item))
            this.edit_id = data.id;
            const { jjxyzbXzlr, jjxyzbXzss, jjxyzbXzxse, jjxyzbNf } = data;
            this.$set(this.form_add, 'add_lr', jjxyzbXzlr);
            this.$set(this.form_add, 'add_ss', jjxyzbXzss);
            this.$set(this.form_add, 'add_xse', jjxyzbXzxse);
            this.$set(this.form_add, 'add_nf', jjxyzbNf)
        },
        del_jjxy(id) {
            let that = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsb_del_jjxy({
                        cxj_cxj_id: that.cxj_cxj_id,
                        id: id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            that.$message.success('删除成功');
                            that.get_cxjsb_list_jjxy();
                        } else {
                            that.$message.error(data.message);
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    that.destroyAll();
                },
            });
        },
        handleCancel() {
            this.yearShowOne = false;
            this.visible = false;
            this.resetForm();
        },
        handleCancelProofVisible() {
            this.applicationProofVisible = false;
            this.form_add = {}
            this.$nextTick(()=>{
                this.$refs.applicationProofForm.resetFields();
            })
        },
        resetForm() {
            this.$nextTick(()=>{
                this.$refs.ruleForm_add.resetFields();
            })
        },
        handleSubmit() {
            let that = this;
            this.$refs.ruleForm_add.validate(valid => {
                if (valid) {
                    let data = {};
                    data.jjxyzbXzlr = that.form_add.add_lr;
                    data.jjxyzbXzss = that.form_add.add_ss;
                    data.jjxyzbXzxse = that.form_add.add_xse;
                    data.jjxyzbNf = that.form_add.add_nf;
                    if (that.edit_id) {
                        data.id = that.edit_id;
                    }
                    cxjsb_add_jjxy(data,that.cxj_cxj_id).then(res=>{
                        if (res.data.code=='200') {
                            that.handleCancel();
                            that.get_cxjsb_list_jjxy();
                            that.$message.success('保存成功');
                        } else {
                            that.$message.error(res.data.message);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        onSubmit() {
            if (!this.form.totalProject) {
                this.$message.error("请填写项目投资额（万元）")
                return;
            }
            if (!this.form.payBack) {
                this.$message.error("请填写回收期（年）")
                return;
            }
            if (!this.form.explain) {
                this.$message.error("请填写经济效益的有关说明及各栏目的计算依据")
                return;
            }
            let data = {}, that = this;
            data.jjxyZtz = that.form.totalProject;
            data.jjxyHsq = that.form.payBack;
            data.jjxyJsyj = that.form.explain;
            if (that.xmobj.id) {
                data.id = that.xmobj.id;
            }
            cjxsb_add(data,that.cxj_cxj_id).then(res=>{
                if (res.data.code=='200') {
                    that.get_cxjsb_queryById_jjxy();
                    that.getStatus(that.cxj_cxj_id);
                    that.$message.success('保存成功');
                } else {
                    that.$message.error(res.data.message);
                }
            })
        },
        destroyAll() {
            this.$destroyAll();
        },
        get_cxjsb_queryById_jjxy() {
            let that = this;
            cxjsb_queryById_jjxy({cxj_cxj_id:that.cxj_cxj_id}).then(res=>{
                if (res.data.code=='200') {
                    that.xmobj = res.data.result;
                    that.form.totalProject = res.data.result.jjxyZtz;
                    that.form.payBack = res.data.result.jjxyHsq;
                    that.form.explain = res.data.result.jjxyJsyj;
                }
            })
        },
        get_cxjsb_list_jjxy() {
            let that = this;
            cxjsb_list_jjxy({cxj_cxj_id:that.cxj_cxj_id}).then(res=>{
                if (res.data.code=='200') {
                    that.jjxylist = res.data.result;
                    that.jjxylist.forEach(item=>{
                        item.jjxyzbNfCopy = new Date(item.jjxyzbNf).getFullYear();
                    })
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.benefit .ant-form {
    max-width: none;
    margin-top: 24px;
}
.addBTn {
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    button {
        width: 88px;
        height: 32px;
        background: #3388EE;
        font-size: 16px;
        font-family: PingFangSCRegular;
        color: #FFFFFF;
        line-height: 22px;
        margin-left: 20px;
    }
}
.tableList {
    margin-top: 27px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 54px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                    em {
                        color: #CB0C0C;
                        margin-right: 5px;
                    }
                }
                &:nth-child(even){
                    background: #F5F5F5;
                }
            }
        }
    }
}
.save_btn {
    width: 250px;
    height: 60px;
    border-radius: 4px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    display: block;
    margin: 40px auto 0;
}
.save_btn1 {
    color: #999;
}



.benefitContent {
    margin-top: 20px;
    .formInfo {
        display: flex;
        border: 1px solid #e8e8e8;
        border-bottom: 0;
        .formItem {
            height: 42px;
            line-height: 42px;
            flex: 1;
            display: flex;
            &:first-child {
                border-right: 1px solid #e8e8e8;
            }
            .label {
                width: 220px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f7fbff;
                border-right: 1px solid #e8e8e8;
                span {
                    color: #f5222d;
                }
                b {
                    font-size: 13px;
                    margin-left: 3px;
                    font-weight: normal;
                }
            }
            .inputCont {
                flex: 1;
                input, textarea {
                    border: none;
                }
                /deep/.ant-input:focus {
                    outline: none !important;
                    box-shadow: none;
                }
            }
        }
    }
    /deep/.customTitle {
        button {
            margin-left: 5px;
            span {
                font-size: 14px;
            }
        }
    }
    /deep/.ant-table table {
        border-radius: 0;
    }
    /deep/.ant-table-thead {
        .ant-table-column-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #333333;
        }
    }

    .shangchuan {
        width: 70px;
        height: 32px;
        line-height: 32px;
        color:#fff;
        text-align: center;
        border: 1px solid #3388EE;
        background: #3388EE;
        margin-left: 10px;
        border-radius: 4px;
        display: inline-block;
    }
}
</style>
import { color } from 'html2canvas/dist/types/css/types/color';

